<template>
  <div class="showSpace">
    <dl >
      <dt><img src="@/assets/Home_imgs/lvxinggongju.png" alt=""></dt>
      <dd>{{newdata[0].title}}</dd>
    </dl>
    <dl >
      <dt><img src="@/assets/Home_imgs/fuli.png" alt=""></dt>
      <dd>{{newdata[1].title}}</dd>
    </dl>
    <dl >
      <dt><img src="@/assets/Home_imgs/heji.png" alt=""></dt>
      <dd>{{newdata[2].title}}</dd>
    </dl>
    <dl >
      <dt><img src="@/assets/Home_imgs/zhuantiye.png" alt=""></dt>
      <dd>{{newdata[3].title}}</dd>
    </dl>
    <dl >
      <dt><img src="@/assets/Home_imgs/chouchoule.png" alt=""></dt>
      <dd>{{newdata[4].title}}</dd>
    </dl>
    <dl >
      <dt><img src="@/assets/Home_imgs/daditu.png" alt=""></dt>
      <dd>{{newdata[5].title}}</dd>
    </dl>
    <dl >
      <dt><img src="@/assets/Home_imgs/zhanji.png" alt=""></dt>
      <dd>{{newdata[6].title}}</dd>
    </dl>
    <dl >
      <dt><img src="@/assets/Home_imgs/gonglue.png" alt=""></dt>
      <dd>{{newdata[7].title}}</dd>
    </dl>

  </div>
</template>

<script>
export default {
  created(){
    this.$store.dispatch("getShowSpace",{url:"/data/Home/showSpace"});
  },
  computed:{
    newdata(){
      return this.$store.state.showSpace.data;
    }
  },
}
</script>

<style scoped>
  .showSpace{
    height: 1.12rem;
    /* background-color: skyblue; */
    display: flex;
    align-items: center;
    overflow: auto;
  }
  .showSpace dl{
    width: .6rem;
    /* flex-shrink: 0; */
    height: 80%;
    margin: 0 .05rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .showSpace dl dt {
    width: .6rem;
  }
  .showSpace dl dt img{
    width: 100%;
  }
  .showSpace dl dd{
    font-size: .12rem;
    color: white;
  }
</style>